<template>
    <div class="main">

        <Content>
            <template #content>
                <div class="top-box ">
                    <div class="boxs dispaly">
                        <div class="left">
                            <img :src="state.urlQueryData.img">
                        </div>
                        <div class="right dispaly-column-between">
                            <div class="top">
                                <div class="t-title">{{ state.urlQueryData.name }}</div>
                                <div class="desc">{{ state.urlQueryData.desc }}</div>
                            </div>
                            <div class="btn-box">
                                <div class="btn dispaly-align-center" @click="clickAncestralHall">祭祖</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="b-w p-20-30 box">
                    <el-row class="dispaly-between">
                        <el-col :span="6">
                            <!-- @scroll="handleScroll" -->
                            <div class="cate" ref="containerRef">
                                <div :class="{ 'active': state.current == index }" class="item pointer"
                                    @click="clickCate(item, index)" v-for="(item, index) in state.cateList"
                                    :key="index">{{ item.name }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <!-- <div class="title">23
                            </div> -->
                            <div class="list">
                                <div v-if="!state.dataLlist.length" class="empty dispaly-col-center">
                                    <el-empty description="暂无数据" :image-size="200" />
                                </div>
                                <div class="person-list ">
                                    <div class="person-item pointer " v-for="(item, index) in state.dataLlist"
                                        :key="index">
                                        <div class="avatar">
                                            <img :src="item.img">
                                            <div class="dispaly-align-center p-name-box">
                                                <div class="p-name">{{ item.name }}</div>
                                            </div>
                                            <!-- 无缝滚动效果 -->
                                            <!-- v-if="item.orderGoodsList.length" -->
                                            <div class="marquee-wrap"
                                                v-if="JSON.stringify(item.orderGoodsList) != '[]'">
                                                <ul class="marquee-list" :class="{ 'animate-up': state.animateUp }">
                                                    <li v-for="(data, index) in item.orderGoodsList" :key="index">{{
                                                        data.goodsName }}
                                                    </li>
                                                </ul>
                                            </div>

                                        </div>
                                        <div class="btn-box" @click="skipDetail(item)">
                                            <div class="btn dispaly-align-center">祭祖</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </el-col>
                    </el-row>
                    <div class="page">
                        <el-pagination @current-change="pageChange" layout="prev, pager, next" :total="state.total" />
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted, ref, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getHallNumberList, getRankedList } from '@/api/index/index'
const state = reactive({
    cateList: [],
    current: 0,
    cateItem: {},
    animateUp: false,
    timer: null,
    dataLlist: [],
    title: '',
    urlQueryData: {},
    queryData: {
        pageNum: 1,
        pageSize: 8,
    },
    total: 0
})

// 跳转详情
const router = useRouter()
const skipDetail = (item) => {
    let data = JSON.stringify({
        id: item.id, desc: item.introduce, name: item.name, img: item.img, hallId: state.urlQueryData.id, tName: state.urlQueryData.name
    })
    localStorage.setItem('info', data)
    skip(data)
}

// 祠堂祭祖
const clickAncestralHall = () => {
    localStorage.setItem('info', JSON.stringify(state.urlQueryData))
    skip(JSON.stringify(state.urlQueryData))
}

const skip = (data) => {
    router.push({
        path: '/contribution',
        query: { data }
    })
}

// 查询堂号
const getHallNumberListData = async () => {
    const res = await getHallNumberList({ ancestralId: state.urlQueryData.id, limit: 100 })
    if (res.code == 200) {
        state.cateList = res.rows
    }
}

// 排位查询
const getRankedListData = async () => {
    const tangHaoId = state.cateItem.id ? state.cateItem.id : state.cateList[0].id
    state.queryData.tangHaoId = tangHaoId
    const res = await getRankedList(state.queryData)
    if (res.code == 200) {
        state.total = res.total
        state.dataLlist = res.rows
    }
}

// 分页
const pageChange = (page) => {
    state.queryData.pageNum = page
    getRankedListData()
}

// 初始化
const init = () => {
    state.queryData.pageNum = 1
    state.dataLlist = []
}

// 分类触底
// const containerRef = ref(null)
// const handleScroll = () => {
//     nextTick(() => {
//         console.log(containerRef.value.scrollHeight, 'containerRef.value.scrollTop');
//         if (containerRef.value.scrollTop + containerRef.value.clientHeight >= containerRef.value.scrollHeight) {
//             console.log('到底了');
//         }
//     })
// }

// 点击分类
const clickCate = (item, index) => {
    init()
    state.cateItem = item
    state.current = index
    state.queryData.tangHaoId = item.id
    getRankedListData()
}

// 获取query参数
const route = useRoute()
const getQuery = () => {
    state.urlQueryData = JSON.parse(route.query.data)
}

onMounted(async () => {
    getQuery()
    await getHallNumberListData()
    await getRankedListData()
    state.timer = setInterval(scrollAnimate, 1500);
})

// 文字滚动
const scrollAnimate = () => {
    state.animateUp = true
    setTimeout(() => {
        state.dataLlist.forEach(item => {
            item.orderGoodsList.push(item.orderGoodsList[0])
            item.orderGoodsList.shift()
        })
        state.animateUp = false
    }, 500)
}

onUnmounted(() => {
    clearInterval(state.timer)
})


</script>

<style lang="scss" scoped>
.active {
    background-color: $primary-color !important;
    color: #fff !important;

}

.btn {
    font-family: MicrosoftYaHei;
    font-size: 22px;
    color: $primary-color;
    background-color: #ece7dc;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
}

.main {
    .cate {
        overflow-y: scroll;
        max-height: $c-height;
        min-height: $c-height;

        .item:last-child {
            margin-bottom: 0;
        }

        .item:hover {
            color: $primary-color;
        }

        .item {
            padding: 20px 10px;
            background-color: #ece7dc;
            color: #333;
            font-family: MicrosoftYaHei;
            font-size: 22px;
            margin-top: 8px;
        }
    }

    .top-box {
        padding: 30px;
        background-color: #fff;

        .boxs {
            padding-bottom: 30px;
            border-bottom: 2px solid #EDE7DB;

            .left {
                width: 282px;
                height: 282px;
                padding-right: 30px;
                border-right: 2px dashed #ccc;

                img {
                    width: 282px;
                    height: 282px;
                    background: #20212A;
                    border-radius: 5px;
                }
            }

            .right {
                padding-left: 35px;
                flex: 3;

                .btn-box {
                    display: flex;
                    justify-content: flex-end;
                }

                .top {
                    .t-title {
                        margin-bottom: 23px;
                        font-family: MicrosoftYaHei, MicrosoftYaHei;
                        font-weight: bold;
                        font-size: 24px;
                    }

                    .desc {
                        font-family: MicrosoftYaHei;
                        font-size: 16px;
                        color: #000000;
                        line-height: 30px;
                    }
                }
            }

        }

    }

    .box {
        position: relative;
        max-height: $c-height;
        min-height: $c-height;


        .title {
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #000001;
            border-bottom: 2px solid #EDE7DB;
            padding-bottom: 15px;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .list {
            margin-left: 40px;
            max-height: 800px;
            min-height: 800px;
            overflow-y: scroll;

            .empty {
                min-height: 800px;
            }

            .person-list {
                display: flex;
                flex-wrap: wrap;

                .person-item {
                    margin: 0 10px 15px 0px;

                    .avatar {
                        position: relative;

                        img {
                            width: 200px;
                            height: 286px;
                            border-radius: 5px;
                        }

                        .p-name-box {
                            position: absolute;
                            bottom: 20px;
                            left: 0;
                            right: 0;

                            .p-name:hover {
                                color: $primary-color;
                            }

                            .p-name {
                                background-color: #fff;
                                width: 182px;
                                text-align: center;
                                height: 30px;
                                line-height: 30px;
                                background: #FFFFFF;
                                border-radius: 5px;
                                font-family: MicrosoftYaHei;
                                font-size: 16px;
                                color: #333333;
                            }
                        }

                    }

                    .desc {
                        background: #EDE7DB;
                        border-radius: 5px;
                        padding: 8px 0;

                        .desc-item:hover {
                            color: $primary-color;
                        }

                        .desc-item {
                            font-family: MicrosoftYaHei;
                            font-size: 16px;
                            color: #333333;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .page {
            display: flex;
            justify-content: flex-end;
            position: absolute;
            right: 0;
            bottom: $bto;
        }
    }
}

:deep(.is-active) {
    background-color: $primary-color !important;
    border-radius: 50% !important;
    color: #fff !important;
}

.marquee-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    height: 40px;
    background: rgba($color: #000000, $alpha: 0.6);
    margin: 0 auto;
    overflow: hidden;

    .marquee-list {
        li {
            // width: 100%;
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding: 0 20px;
            list-style: none;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            font-weight: 400;
        }
    }

    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-40px);
    }
}
</style>